<template>
  <el-steps v-bind="$attrs" simple class="steps">
    <slot></slot>
  </el-steps>
</template>

<script setup>
import { ElSteps } from "element-plus";
</script>

<style lang="less" scoped>
.steps {
  background-color: transparent;
  padding: 0px 4% 10px 4%;

  // simple 模式：将箭头改为横线
  :deep(.el-step.is-simple .el-step__arrow) {
    flex: 1;
    height: 2px;
    margin: 10px 10px 8px 10px;
    background-color: #dcdfe6;
    border: 0;
  }
  :deep(.el-step.is-simple .el-step__arrow::before),
  :deep(.el-step.is-simple .el-step__arrow::after) {
    content: none !important;
    display: none !important;
  }
  :deep(.el-step__head.is-success) {
    color: var(--el-color-primary);
    border-color: var(--el-color-primary);
  }

  :deep(.el-step__title.is-success) {
    color: var(--el-color-primary);
  }

  :deep(.el-step__head.is-process) {
    color: var(--el-color-primary);
    border-color: var(--el-color-primary);

    .el-step__icon {
      background: var(--el-color-primary);
    }
  }

  :deep(.el-step__title.is-process) {
    font-weight: bold;
    color: var(--el-color-primary);
  }
}
</style>
